<template>
  <div>
    <MBX
      level="数据统计"
      level2="数据报表"
    ></MBX>
    <br>
    <el-card>
      <div
        class="myecharts"
        ref="myecharts"
      >

      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      shuju: null,
      options: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }
    };
  },
  mounted() {
    this.xr();
        let _this = this;
    window.addEventListener(
      "resize",
      function() {
        _this.shuju.resize();
      },
      false
    );
  },
  methods: {
    async xr() {
      this.shuju = echarts.init(this.$refs.myecharts);

      let res = await this.$API.shujutongji();
      console.log("数据统计", res);

      let hebing = {...this.options, ...res};
      let option = hebing;

      this.shuju.setOption(option);
    }
  }
};
</script>

<style scoped >
.myecharts {
  width: 100%;
  height: 600px;
  border: 1px solid;
}
</style>
